<template>
<view    class="bottom">
              
                <!-- <view class="box"> -->

                <!-- <scroll-view class="scroll" scroll-y @scroll="pageScroll">
                    <u-swiper :list="swiperList" keyName="img" height="260" radius="0" indicator indicatorMode="dot"
                        circular @click="swiperSkip($event, 1)"></u-swiper>
                    <view>
                        <view class="img1">
                            <image style="width: 100%" v-for="(item, index) in profileList" :key="index" mode="widthFix"
                                :src="item.img" @click="swiperSkip(index, 2)"></image>
                        </view>
                    </view>
                    <image v-for="(item, index) in referralsList" :key="index" class="img" :src="item.goodImg" mode="">
                    </image>
                </scroll-view> -->
                <view  class="list" v-for="item in listData" @click="appointMent(item)">
                    <view class="one">
                        <image :src="url+item.imagePath.split(',')[0]" mode="" style="
                           margin:16rpx 0 0 10rpx;width: 193rpx;
                            height: 150rpx;"></image>
                    </view>
                    <view class="two" style="margin-left:20rpx;">
                        <view class="center1">
                            {{item.setMealName}}
                        </view>
                        <view class="center2">
                            {{item.packageDescription}}
						
                        </view>
                    </view>
                    <view class="three" >
                        <view class="price" >¥{{item.price}}</view>
                        <view @click="appointMent(item)">
                            <view class="text" style="text-align: center;">购买</view>
                        </view>
                    </view>
                    <!-- </view> -->
                </view>
				<image  v-if="!listData.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
				
            </view>
</template>

<script >
	import {baseUrl} from "@/config.js"
export default {
  name: "list",
  props: ["listData"],
  watch:{
  	  listData(){
	    console.log("数据改变了")	  
	   }
  },
  data(){
	   return {
		   tiJianLIst:[
		       {
		       name:'儿童体检',
		       price:'',
		       path:'',
		       image:'/static/images2/男儿童医生.png',
		       jianInfo:'包含内科检查、外科检查、视力筛查五官检查，系统检查'
		   }],
		   url:""
	   }
  },
  mounted(){
	  console.log(this.listData,"数据")
	  this.url = baseUrl;
  },
 methods:{ 
	 isLogin(){
	 		  if(uni.getStorageSync('token'))
	 		   {
	 			  return true
	 		   }else{
	 			     this.$u.toast("请先登录")  
	 			  return false
	 		   }
	 },
	  appointMent(item) {
		  if(!this.isLogin()) return 
	  uni.navigateTo({
	    url: `/subPages/meaDetail/meaDetail?data=${encodeURIComponent(JSON.stringify(item))}`
	  })
	  },
 }
}
</script>

<style scoped>
.container {
  width: 100%; 

  background-color: red;
}
.text{
	 color:white;
	 background-color: #159DFF ;
	 padding: 10rpx;
	 border-radius: 25rpx;
	 background-color: ;
}
    .list {
        display: flex;
        margin: 52rpx 32rpx 0;
        // border: 1rpx solid black;
		 overflow: hidden;
		 text-overflow: ellipsis; 
        width: 686rpx;
        height: 190rpx;
		box-sizing: border-box;
		padding: 10rpx;
		justify-content: space-around;
        // background: #FFFFFF;
        background: #F8FCFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
    .price{
		width: 110rpx;
		height: 36rpx;
		font-family: Douyin Sans, Douyin Sans;
		font-weight: bold;
		font-size: 30rpx;
		color: #EB5432;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
    .right1 {
        margin: 56rpx 0rpx 0 0;
        width: 110rpx;
        height: 36rpx;
        font-family: Douyin Sans, Douyin Sans;
        font-weight: bold;
        font-size: 30rpx;
       
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
	.two{
		 display: flex;
		 flex-direction: column;
		
	}
	.center1{
		 margin-top: 10rpx;
	}
	.center2{
		 margin-top: 20rpx;
		 color:#777777;
		 width: 300rpx;
		 
		 font-size: 24rpx;
		  word-wrap: break-word;
	}
	.three{
		display: flex;
		height: 100%;
	    
		flex-direction: column;
		
	    justify-content: space-evenly;
	}
	.right2 {
	    width: 146rpx;
	    height: 52rpx;
	    background: #159DFF;
	    border-radius: 74rpx 74rpx 74rpx 74rpx;
	    display: flex;
	    align-items: center;
		
	    justify-content: center;
	}
	
</style>
